<script setup lang="ts">
import { ref } from 'vue';
import NavBar from '@/components/nav-bar.vue';
import appList from '@/api/pkgs'


const file = ref();
const filePath = ref();
const fileInput = ref();
const dowonload = ref();
const percent = ref(0)
const status = ref('');
const carSystemKey = ref('wutong')
const handleFileChange = (event) => {
  file.value = event.target?.files;
  filePath.value = event.target?.value;
};

let timer;
const resigner = async () => {
  // const fileName = file.value[0];
  // const suffix = fileName.substring(fileName.lastIndexOf(".") + 1,fileName.length);
  // console.log(suffix);

  // if(suffix!=='apk'){
  //   message.success('请上传apk文件')
  //   return false;
  // }

  timer = setInterval(() => {
    if (!dowonload.value) {
      // if (percent.value > 99) {
      // // 实在太慢
      // } else 
      if (percent.value > 90) {
        percent.value += 0.1
      } else if (percent.value > 80) {
        percent.value += 1
      } else if (percent.value > 50) {
        percent.value += 2
      } else if (percent.value >= 0) {
        percent.value += 3
      }
    } else {
      percent.value = 100
      clearInterval(timer)
    }
  }, 1000)


  // 拼接参数
  const formData = new FormData();
  formData.append('file', file.value[0]);
  formData.append('type', carSystemKey.value);
  formData.append('packageName', packageName.value)
  // 开始上传
  try {
    const res = await api.resigner(formData);
    dowonload.value = res.dowonload;
  } catch (error) {
    clearInterval(timer)
    status.value = 'exception'
  }
}

const onAgin = () => {
  location.reload();
}


const packageName = ref('');

</script>

<template>
  <nav-bar />
  <div class="home">
    <div class="topkg">
      <RouterLink to="pkg">查看车机系统商店应用信息</RouterLink>
    </div>
    <div>
      <label for="fileInput" class="ipt-label">
        <div v-if="filePath">{{ filePath }}</div>
        <div v-else>请上传文件</div>
      </label>
      <input id="fileInput" type="file" ref="fileInput" accept=".apk" @change="handleFileChange" hidden>
    </div>
    <div class="resigner-wrapp">
      <template v-if="file && !Boolean(percent)">
        <a-row :gutter="24">
          <a-col class="gutter-row" :xs="{ span: 24 }" :lg="{ span: 12 }">
            <div class="item">
              <label>车系：</label>
              <a-select v-model:value="carSystemKey">
                <a-select-option value="wutong">梧桐系</a-select-option>
                <a-select-option value="feiyu">飞鱼系</a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :xs="{ span: 24 }" :lg="{ span: 12 }">
            <div class="item">
              <label>包名：</label>
              <a-select v-model:value="packageName" placeholder="伪装成" show-search allow-clear mode="SECRET_COMBOBOX_MODE_DO_NOT_USE">
                <template v-for="pkg in appList">
                  <a-select-option :value="pkg.package">
                    <img class="icon" :src="`./pkgs/${pkg.name}.png`" width="20" /> {{ pkg.name }}：{{ pkg.package }}
                  </a-select-option>
                </template>

              </a-select>
            </div>
          </a-col>

          <a-col class="gutter-row tips" :xs="{ span: 24 }" :lg="{ span: 12 }">
            说明：
            <div>选择车系是用于签名，以便于能安装到您车机上。</div>
            <div>包名是用于伪装，方便后期卸载。</div>

            <div style="color: red;">包名慎选，会极大增加服务器压力和您的等待时长，且存在安装包不可使用的风险！</div>
          </a-col>

        </a-row>

        <a-button type="primary" class="resigner starttrans" @click="resigner">开始转换</a-button>
      </template>


    </div>

    <div class="circle">
      <a-progress type="circle" :percent="percent" v-if="percent" :status="status" />
    </div>
    <div class="resigner-over" v-if="dowonload">
      <div class="actions">
        <a :href="dowonload" target="_blank">
          <a-button type="primary" class="resigner">下载</a-button>
        </a>
        <a-button type="primary" @click="onAgin" danger>再转换一个</a-button>
      </div>

      <div class="pay">
        <!-- <div>
          欢迎加群讨论 
        </div> -->

        <img class="money" src="../../assets/qq.jpg">

      </div>
    </div>

  </div>
</template>

<style scoped lang="less">

.home {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  width: 100%;

  .topkg {
    padding: 10px 0;
    display: flex;
    justify-content: right;

    a {
      font-size: 12px;
      text-decoration: none;
      color: #0081ff;
    }
  }

  .ipt-label {
    border: rgba(0, 0, 0, 0.3) dashed 4px;
    height: 100px;
    display: block;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .resigner-wrapp {
    height: 20px;
    margin: 10px 0;

    .starttrans {
      width: 100%;
      display: block;
      margin-top: 10px;
    }

    .gutter-row {
      margin-top: 10px;

      .resigner {
        width: 100%;
      }



      .item {
        display: flex;
        align-items: center;

        label {
          display: block;
        }

        div {
          width: calc(100% - 46px);
        }

      }
    }

    .tips{
      font-size: 12px!important;
      color: rgba(0, 0, 0, 0.5);
    }


  }



  .circle {
    display: flex;
    justify-content: center;
  }

  .resigner-over {
    .actions {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;

      &>button,
      &>a {
        display: block;
        width: 49%;

        &>button {
          width: 100%;
        }
      }
    }

    .pay {
      margin-top: 30px;
      text-align: center;

      .money {
        width: 100%;
        max-width: 300px;
      }
    }

  }


}
</style>
